<template>
  <div id="addHard_container">
    <div style="width: 100%">
      <el-upload
        class="upload-demo"
        :limit="5"
        ref="upload"
        drag
        :action="actions"
        :auto-upload="false"
        multiple
        :on-change="handleChange"
        :file-list="fileList"
        :before-upload="beforeUpload"
        accept=".pdf"
        :on-remove="delFile"
      >
        <el-icon class="el-icon--upload upload"><upload-filled /></el-icon>
        <div class="el-upload__text">Drop file here or <em>click to upload</em></div>
        <template #tip>
          <div class="el-upload__tip">ファイルを選んでください</div>
        </template>
      </el-upload>
    </div>

    <div class="upset">
      <el-button type="primary" v-preventReClick @click="submitUpload">アップロード確認</el-button>
    </div>
  </div>
</template>

<script>
import { UploadFilled } from '@element-plus/icons'
export default {
  components: {
    'upload-filled': UploadFilled
  },
  data() {
    return {
      fileList: [],
      addHardDisk: {
        delflg: '1',
        ihdGuid: window.sessionStorage.getItem('Disk'),
        ihdfAid: this.$store.getters.showuserGuid,
        ihdfSwfpath: '1',
        base64Datas: [],
        actions: ''
      },
      i: 0,
      new_base64Datas: []
    }
  },
  created() {
    this.actions = this.axios.defaults.baseURL + '/internetharddrivesfile/insertbatch'
    console.log(this.actions)
  },
  methods: {
    handleChange(file) {
      console.log(file.raw)
      let reader = new FileReader()
      reader.readAsDataURL(file.raw) // 这里也可以直接写参数event.raw

      // 转换成功后的操作，reader.result即为转换后的DataURL ，
      // 它不需要自己定义，你可以console.log(reader.result)看一下
      reader.onload = () => {
        const f = file.name + reader.result
        this.addHardDisk.base64Datas.push(f)
        console.log(this.addHardDisk.base64Datas)
      }
      console.log(this.fileList)
      // 不会自动上传
      return false
    },
    beforeUpload(file) {
      // this.i = 0
      console.log(file.name)
      console.log(this.addHardDisk.base64Datas)
      // 去重
      //  for(var i=0;i<this.fileList.length-1;i++)
      //   for(var j=i+1;j<this.fileList.length;j++)
      //   {
      //     if(this.fileList[i]===this.addHardDisk.base64Datas[j])
      //     this.fileList.splice(j, 1)
      //   }
      // 文件名
      // console.log(file.name.split('.')[0])
      // 文件类型
      // console.log(file.name.split('.')[0])
      console.log(this.fileList)
    },
    delFile(f) {
      console.log(f)

     
        let flag = 0
        for(let i=0;i<this.addHardDisk.base64Datas.length;i++)
        {
         const  fileName = this.addHardDisk.base64Datas[i].slice(0, this.addHardDisk.base64Datas[i].indexOf('data'))
          console.log(fileName)
          if (fileName === f.name) {
            this.addHardDisk.base64Datas.splice(i, 1)
            flag = 1
            return
          }
          console.log(flag)
          if (flag === 1) {
            return false
          }
          console.log(this.addHardDisk.base64Datas)
        }
        // this.addHardDisk.base64Datas.forEach((item, index) => {
        //   const fileName = item.slice(0, item.indexOf('data'))
        //   console.log(fileName)
        //   if (fileName === f.name) {
        //     this.addHardDisk.base64Datas.splice(index, 1)
        //     flag = 1
        //     return
        //   }
        //   console.log(flag)
        //   if (flag === 1) {
        //     return false
        //   }
        //   console.log(this.addHardDisk.base64Datas)
        // })
     
    },
    submitUpload() {
      console.log(this.fileList)
      // for (var i = 0; i < this.addHardDisk.base64Datas.length - 1; i++)
      //   for (var j = i + 1; j < this.addHardDisk.base64Datas.length; j++) {
      //     if (this.addHardDisk.base64Datas[i] === this.addHardDisk.base64Datas[j]) this.addHardDisk.base64Datas.splice(j, 1)
      //   }
      if (this.addHardDisk.base64Datas.length === 0) return this.$message.warning('ファイルを添付してください')
      console.log(this.addHardDisk.base64Datas)
      this.axios.post('/internetharddrivesfile/insertbatch', this.addHardDisk).then((res) => {
        console.log(res)
        if (res.data.success !== 1) {
          return this.$message.error('ファイルがアップロード失敗しました！')
        }
        this.$message.success('ファイルが正常にアップロードしました')
        this.$emit('add-comment')
        this.fileList = []
        this.addHardDisk.base64Datas = []
      })
    }
  }
}
</script>
<style scoped>
#addHard_container {
  width: 100%;
}
#addHard_container .upload {
  font-size: 100px;
  color: rgb(180, 180, 180);
}
#addHard_container .el-upload-dragger {
  width: 590px;
}
.upset {
  width: 100%;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
#addHard_container .el-upload {
  width: 100%;
}
#addHard_container .el-upload .el-upload-dragger {
  width: 100%;
}
</style>
